<!-- 从业者-机构邀请从业者报名 -->
<template>
  <view class="invitation-container">
    <!-- 顶部邀请信息 -->
    <view class="invitation-header">
      <!-- <text class="invitation-title">邀请报名</text> -->
      <text class="invitation-text">邀请你报名考证：</text>
    </view>
    
		<!-- 课程列表 -->
		<view class="course-list">
			<view class="course-item" v-for="(course, index) in courseList" :key="index">
				<view class="course-left">
					<u-image :src="course.cover" width="220rpx" height="240rpx" mode="aspectFill" radius="4"></u-image>
				</view>

				<view class="course-right">
					<text class="course-name">{{ course.name }}</text>
					<text class="course-level">可报名等级：{{ course.level }}</text>
					<text class="course-count">报名城市：{{ course.city }}</text>
					<text class="course-teacher">报名截止时间：{{ course.expirDate }}</text>
				</view>
			</view>
		</view>
    
    <!-- 报名按钮 -->
    <view class="submit-btn">
      <u-button 
        type="primary" 
        shape="circle" 
        @click="submitApplication"
				:custom-style="coutomStyleBut"
      >
        提交报名
      </u-button>
    </view>
    
    <!-- 等级申报条件 -->
    <view class="requirements">
			<view class="requir-text">
				<text class="section-title">等级申报条件：</text>
				<text class="requirements-text">{{ examInfo.requirements }}</text>
			</view>
			<!-- 考证封面 -->
			<view class="exam-cover">
			  <u-image 
			    :src="examInfo.cover" 
			    width="100%" 
			    height="300rpx" 
			    mode="aspectFill"
			    radius="8"
			  ></u-image>
			</view>
    </view>
		

  </view>
</template>

<script>
export default {
  data() {
    return {
			coutomStyleBut: {
				"backgroundColor": "#03B8CD",
				"color": "#ffffff",
			},
      // inviter: 'XXXXXXXXXXXXX',
      examInfo: {
        cover: '/static/exam-cover.jpg', // 考证封面图
        name: '考证名称',
        levels: '三级、四级、五级',
        city: '福州',
        deadline: '6月20日 00:00',
        requirements: '文字或图片说明文字或图片说明文字或图片说明文字或图片说明文字或图片说明',
        inviter: 'TZMM'
      },
			courseList: [{
					id: 1,
					cover: '/static/course1.jpg',
					name: '前端开发高级课程',
					level: '一级、二级、三级、四级',
					expirDate: '6月20日 00:00',
					lessonCount: 45,
					price: '80.00',
					city: '福州',
					purchased: false
				}
			]
    }
  },
  methods: {
    submitApplication() {
      // uni.showLoading({
      //   title: '提交中...'
      // })
			uni.navigateTo({
				url: '/pages/Practitioner/instiVisitPract/singUpVerification'
			})
      
      // 模拟提交请求
      // setTimeout(() => {
      //   uni.hideLoading()
      //   uni.showToast({
      //     title: '报名成功',
      //     icon: 'success'
      //   })
        
      //   // 实际项目中这里应该跳转到报名成功页面
      //   setTimeout(() => {
      //     uni.navigateBack()
      //   }, 1500)
      // }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
.invitation-container {
  padding: 30rpx;
  background-color: #FFFFFF;
  min-height: 100vh;
}

.invitation-header {
  margin-bottom: 30rpx;
	
  .invitation-text {
    font-size: 32rpx;
    color: #666;
  }
}


.course-list {
		background-color: #F1F7F7;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 50px;
}

.course-item {
	display: flex;
	padding: 20rpx;
	border-bottom: 1rpx solid #eee;

	&:last-child {
		border-bottom: none;
	}
}

	.course-left {
		margin-right: 20rpx;
	}

	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.course-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	
	.course-level,
	.course-teacher {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}
	
	.course-rating {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	
		.rating-value {
			font-size: 24rpx;
			color: #ff9900;
			margin-left: 10rpx;
		}
	}



.exam-info {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .exam-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 20rpx;
  }
  
  .info-item {
    display: flex;
    margin-bottom: 15rpx;
    font-size: 28rpx;
    
    .info-label {
      color: #666;
      width: 180rpx;
      flex-shrink: 0;
    }
    
    .info-value {
      color: #333;
      flex: 1;
    }
  }
}

.submit-btn {
  margin-bottom: 40rpx;
  
  /deep/ .u-button {
    height: 90rpx;
    font-size: 32rpx;
  }
}

.requirements {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
	
	.requir-text {
		margin: 20px 0;
	}
  
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 15rpx;
  }
  
  .requirements-text {
    font-size: 26rpx;
    color: #666;
    line-height: 26rpx;
		margin-bottom: 10px;
		padding-bottom: 10rpx;
  }
	
	.exam-cover {
	  margin: 30rpx 0;
	  border-radius: 12rpx;
	  overflow: hidden;
		// 阴影
	  // box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		
	}
}

.inviter-info {
  text-align: right;
  font-size: 26rpx;
  color: #999;
  padding: 20rpx 0;
}
</style>